(function() {
    //标题导航数据获取
    fetch('http://chst.vip:1234/api/getbaicaijiatitle').then(body => body.json()).then(res => {
        let result = res.result;

        let smallStr = '';
        result.forEach(item => {
            smallStr += `
            <li date-index="${item.titleId}"><a href="#">${item.title}</a></li>
            `
        });
        $('.smallNav').html(smallStr);
        getDate(0);
        //导航点击事件
        $('.smallNav').on('click', 'li', (e) => {
            if (e.target.localName == 'a') {
                $(e.target).parent().addClass('cur').siblings().removeClass();
                let curIndex = $(e.target).parent().attr('date-index');
                getDate(curIndex);
            }
        });

        //列表数据获取  渲染
        function getDate(index = 0) {
            index -= 0;
            fetch('http://chst.vip:1234/api/getbaicaijiaproduct?titleid=' + index).then(body => body.json()).then(res => {
                let result = res.result;
                let liStr = '';
                result.forEach(item => {
                    liStr += `
                    <li date-productId="${item.productId}">
                        <a href="#">
                            <div class="img">
                            ${item.productImg}
                            </div>
                            <div class="content">
                                <h3>${item.productName}</h3>
                                <div class="price">
                                    ${item.productPrice}
                                  
                                </div>
                                <div class="load">
                                    <div class="loadRed"><span>100%</span></div>
                                    <span>已领115张/剩余11张</span>
                                </div>
                                <div class="down">
                                    <div class="coupon">点击领取优惠券</div>
                                    <button id="down">下单链接</button>
                                </div>
                            </div>
                        </a>
                    </li>
                    `
                });
                $('.productLis').html(liStr);

                let max = parseFloat($('.loadRed').css('width'));
                $('.loadRed > span').animate({ width: max, }, 1500);
            })
        }
    });
    $('.productLis').on('click', 'li', function() {
        $('.mask').slideDown(500);
        $('html,body').css({ overflow: 'hidden' })
    });
    $('.close').on('click', function() {
        $('.mask').slideUp(500);
        $('html,body').css({ overflow: 'auto' })
    })
})();
(function() {
    //导航点击按钮
    $('.back').on('click', function() {
        history.go(-1);
    });
    //底部点击事件
    $('.footNav').on('click', 'li', function() {
        if ($(this).index() == 0) {
            location.href = '../html/index.html';
        } else if ($(this).index() == 1) {
            location.href = '../html/category.html';
        } else {
            $('html,body').stop().animate({ scrollTop: 0 }, 500)
        }
    })
})()